<template>
  <m-card :title="title" :icon="icon">
      <div class="nav d-flex jc-between pt-3">
        <div
          class="nav-item"
          :class="{active: active === i}"
          v-for="(category, i) in categories"
          :key="i"
          @click="$refs.swiperRef.$swiper.slideTo(i)"
        >
          <div class="nav-link">{{category.name}}</div>
        </div>
      </div>
      <div class="pt-3">
        <swiper
          ref="swiperRef"
          @slide-change="() => active = this.$refs.swiperRef.$swiper.activeIndex"
          :options="swiperOptions"
        >
          <swiper-slide v-for="(category, i) in categories" :key="i">
            <slot name="categoryContent" :content="category"></slot>
          </swiper-slide>
        </swiper>
      </div>
    </m-card>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    categories: { type: Array, required: true }
  },
  data() {
    return{
      active: 0,
      swiperOptions: {
          pagination: false,
          autoHeight: true
        }
    }
  }
}
</script>

<style>
.swiper-container {
  position: relative;
}
</style>
